<template>
  <div class="main">
    <div class="content">
      <div class="user">
        <input placeholder="请输入账号" v-model="userName" type="text" />
      </div>
      <div class="password">
        <input :placeholder="placeholder" :type="inputType" v-model="password" />
      </div>
      <div class="typeDesc">
        <span @click="changeInputType">{{loginTypeDesc}}</span>
        <span @click.stop="getVerificationCode" v-if="loginType!=1" class="right">获取验证码</span>
      </div>
      <mt-button type="primary" size="large" @click.native="submit" class="button">登陆</mt-button>
    </div>
  </div>
</template>
<script>
import { Toast } from 'mint-ui'
import {addLocalStorage} from '@/common/until/localStorage.js'
export default {
  data () {
    return {
      userName: '',
      password: '',
      token: '',
      // 0为验证码，1为密码，默认为密码
      loginType: 1,
      toast: null
    }
  },
  computed: {
    loginTypeDesc () {
      return this.loginType === 1 ? '用短信验证码登陆' : '用密码登陆'
    },
    placeholder () {
      return this.loginType === 1 ? '请输入密码' : '请输入验证码'
    },
    inputType () {
      return this.loginType === 1 ? 'password' : 'text'
    }
  },
  methods: {
    changeInputType () {
      this.password = ''
      this.loginType = this.loginType === 1 ? 0 : 1
    },
    async getVerificationCode () {
      this.toast && this.toast.close()
      if (!/^1[34578]\d{9}$/.test(this.userName)) {
        this.toast = Toast({
          message: '请输入正确的电话号码',
          position: 'middle',
          duration: 500000
        })
        return
      }
      const res = await this.$store.dispatch('getVerificationCode', { phone: this.userName })
      if (res.status === '0') {
        this.toast = Toast({
          message: '已发送',
          position: 'middle',
          duration: 5000
        })
      }
    },
    async submit () {
      this.toast && this.toast.close()
      if (!/^1[34578]\d{9}$/.test(this.userName)) {
        this.toast = Toast({
          message: '请输入正确的电话号码',
          position: 'middle',
          duration: 5000
        })
        return
      }
      if (!this.password) {
        const desc = this.loginType === 1 ? '密码' : '验证码'
        this.toast = Toast({
          message: `${desc}不能为空`,
          position: 'middle',
          duration: 5000
        })
        return
      }
      const parm = {
        phone: this.userName,
        type: this.loginType,
        code: this.password
      }
      const res = await this.$store.dispatch('login', parm)
      if (res.status === '0') {
        this.token = res.token
        this.$store.commit('setToken', res.token)
        addLocalStorage('fireToken', res.token)
        // Proprietor业主maintainor维保单位supervisor监管单位
        const userType = res.authority === 'supervisor' ? 'supervisor' : 'ownerHome'
        this.$store.commit('setState', userType)
        this.$store.commit('setPhone', this.userName)
        this.$store.commit('setUser', res)
        this.$router.push('/home')
      }
    }
  },
  beforeDestroy () {
    this.toast && this.toast.close()
  }
}
</script>
<style lang="less" scoped>
.beforIcon() {
	content: '';
	display: inline-block;
	width: 40px;
	height: 40px;
	position: absolute;
	left: 10px;
	top: 0;
}
.main {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #17b887;
	.content {
		margin: 200px auto 0 auto;
		width: 300px;
		position: relative;
		div {
			height: 40px;
			line-height: 40px;
			margin-bottom: 10px;
			overflow: hidden;
			background: #fff;
			border-radius: 6px;
			position: relative;
			input {
				padding-left: 50px;
				width: 240px;
				display: inline-block;
				height: 40px;
				line-height: 40px;
			}
		}
		.user {
			margin-bottom: 30px;
			&::before {
				.beforIcon();
				background: url('~@/assets/image/user.svg') no-repeat center / 20px 20px;
			}
		}
		.password {
			&::before {
				.beforIcon();
				background: url('~@/assets/image/password.svg') no-repeat center / 20px 20px;
			}
		}
		.typeDesc {
			background: #17b887;
			color: #fff;
			.right {
				float: right;
			}
		}
	}
}
</style>
